﻿<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                &times;</button>
            <h4 class="modal-title" id="modal-label">
                手机绑定</h4>
        </div>
        <div class="modal-body">
            <div id="form-group-for-mobile" class="form-group">
                <div class="input-group">
                    <input id="mobile" name="mobile" type="text" class="form-control" maxlength="11"
                        placeholder="请输入您有效的手机号码" />
                    <span class="input-group-btn">
                        <button class="btn btn-info" type="button" onclick="getAuthCode();">
                            获取短信验证码</button>
                    </span>
                </div>
                <p id="help-block-for-mobile" class="help-block">
                    请输入您有效的手机号码！
                </p>
            </div>
            <div id="form-group-for-authcode" class="form-group" style="display: none;">
                <p id="bind-mobile" class="text-success">
                    &nbsp;</p>
                <div class="input-group">
                    <input id="authId" name="authId" type="hidden" />
                    <input id="authcode" name="authcode" type="text" class="form-control" placeholder="请输入手机短信验证码" />
                    <span class="input-group-btn">
                        <button id="btn-mobile-bind" class="btn btn-info" type="button" onclick="mobileBind();"
                            data-default-text="绑定该手机号码" data-loading-text="绑定验证中...">
                            绑定该手机号码</button>
                    </span>
                </div>
                <p id="help-block-for-authcode" class="help-block">
                    请输入接收到的手机短信验证码！
                </p>
            </div>
        </div>
        
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
<script type="text/javascript">
    function getAuthCode() {
        var mobile = $('#mobile').val();
        if (!mobile.isMobile()) {
            $('#help-block-for-mobile').html("请输入正确的手机号码！");
            $('#form-group-for-mobile').removeClass('has-success').addClass('has-error');
        } else {
            $.postJSON('/global/authcode/1', { mobile: mobile }, function (result) {
                if (result.Status == true) {
                    $("#authId").val(result.Data);
                    $('#bind-mobile').text(mobile);
                    $("#form-group-for-mobile").hide();
                    $("#form-group-for-authcode").show();
                    $('#form-group-for-mobile').removeClass('has-success').removeClass('has-error');
                } else {
                    $('#help-block-for-mobile').html(result.Message);
                    $('#form-group-for-mobile').removeClass('has-success').addClass('has-error');
                }
            });
        }
    }
    function mobileBind() {
        var mobile = $('#mobile').val();
        var authId = $('#authId').val();
        var authCode = $('#authcode').val();

        if (!mobile.isMobile()) {
            $("#form-group-for-mobile").show();
            $("#form-group-for-authcode").hide();
            $('#help-block-for-mobile').html("请输入正确的手机号码！");
            $('#form-group-for-mobile').removeClass('has-success').addClass('has-error');
            return;
        }
        if (authCode.isEmpty()) {
            $('#help-block-for-authcode').html("请输入接收到的手机短信验证码！");
            $('#form-group-for-authcode').removeClass('has-success').addClass('has-error');
            return;
        }
        $('#btn-mobile-bind').button('loading');
        $.postJSON('/security/mobilebind', { mobile: mobile, authId: authId, authCode: authCode }, function (result) {
            if (result.Status == true) {
                $('#help-block-for-authcode').html("已成功绑定！");
                $('#form-group-for-authcode').removeClass('has-error').addClass('has-success');

                setTimeout(function () {
                    window.location.reload();
                }, 3000);
            } else {
                $('#btn-mobile-bind').button('default');
                $('#help-block-for-authcode').html(result.Message);
                $('#form-group-for-authcode').removeClass('has-success').addClass('has-error');
            }
        });
    }
</script>
